<script setup>
defineProps({
  title: {
    type: String,
    required: true
  },
  icon: {
    type: String,
    default: ''
  },
  color: {
    type: String,
    default: 'primary'
  },
  showMore: {
    type: Boolean,
    default: false
  }
})

const getColorClass = (color) => {
  const colorMap = {
    primary: 'bg-primary-dark',
    success: 'bg-success',
    warning: 'bg-warning',
    danger: 'bg-danger'
  }
  return colorMap[color] || colorMap.primary
}
</script>

<template>
  <div class="card h-full">
    <div class="flex justify-between items-center mb-3">
      <div class="flex items-center">
        <div :class="`w-8 h-8 rounded-md flex items-center justify-center ${getColorClass(color)} mr-3`">
          <el-icon class="text-white"><component :is="icon" /></el-icon>
        </div>
        <h3 class="text-text-dark font-medium text-base m-0">{{ title }}</h3>
      </div>
      
      <div v-if="showMore" class="text-primary text-sm cursor-pointer hover:text-primary-dark flex items-center">
        <span>更多</span>
        <el-icon class="ml-1"><ArrowRight /></el-icon>
      </div>
    </div>
    
    <div class="card-content">
      <slot></slot>
    </div>
  </div>
</template>